Component({
  data: {
    // 组件内部数据
    timeDesc: 0,
    percentage: 0,
  },
  methods: {
    init(list) {
      this.drawBatteryArc(list);
    },
    formatHoursToDays(totalHours) {
      if(totalHours=='0'){
        return '0天0小时';
      }
      // 确保输入是数字类型
      const hours = Number(totalHours);
      // 计算天数和剩余小时
      const days = Math.floor(hours / 24);
      const remainingHours = hours % 24;
      return {
        days: days,
        hours: remainingHours,
        toString: function () {
          return `${this.days}天${this.hours}小时`;
        }
      };
    },
    drawBatteryArc: function (list) {
      //time
      let battery = list.battery||0;
      let duration = list.duration||0;
      let timeDesc = this.formatHoursToDays(duration).toString();
      this.setData({
        percentage: battery,
        timeDesc,
      })
      const query = wx.createSelectorQuery().in(this);
      query.select('#circleCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          if (res[0] && res[0].node) {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            const width = res[0].width;
            const height = res[0].height;
            canvas.width = width;
            canvas.height = height;

            const centerX = width / 2.6; // 调整圆心X位置
            const centerY = height * 1.8; // 将圆心大幅下移，使弧线更平缓
            const radius = Math.min(width * 1.2, height * 1.6); // 大幅增加半径使弧线更平缓

            // 设置不同的线宽
            const grayLineWidth = 4; // 8rpx 约等于 4px
            const colorLineWidth = 15; // 30rpx 约等于 15px

            // 创建渐变
            const gradient = ctx.createLinearGradient(0, width / 4, width, height / 2);
            gradient.addColorStop(0, '#4ECDB6');
            gradient.addColorStop(1, '#2BEE72');

            // 计算弧度（非常平缓的弧线）
            const startAngle = 1.3 * Math.PI; // 调整起始角度
            const endAngle = 1.7 * Math.PI; // 减小结束角度
            const totalAngle = 0.4 * Math.PI; // 减小总角度范围，使弧线更平缓

            // 绘制灰色背景弧
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
            ctx.strokeStyle = '#E0E0E0';
            ctx.lineWidth = grayLineWidth;
            ctx.lineCap = 'round';
            ctx.stroke();

            // 绘制电量弧
            const angle = (battery / 100) * totalAngle;
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, startAngle + angle);
            ctx.strokeStyle = gradient;
            ctx.lineWidth = colorLineWidth;
            ctx.lineCap = 'round';
            ctx.stroke();

            // 绘制终点圆点（白色内圈，绿色外圈）
            if (battery > 0) {
              const endAngle = startAngle + angle;
              const endX = centerX + radius * Math.cos(endAngle);
              const endY = centerY + radius * Math.sin(endAngle);

              // 绘制绿色外圈
              ctx.beginPath();
              ctx.arc(endX, endY, colorLineWidth / 1.5, 0, 2 * Math.PI);
              ctx.fillStyle = '#2BEE72';
              ctx.fill();

              // 绘制白色内圈
              ctx.beginPath();
              ctx.arc(endX, endY, colorLineWidth / 3, 0, 2 * Math.PI);
              ctx.fillStyle = '#FFFFFF';
              ctx.fill();
            }
          }
        });
    }
  }
})